<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">蘑菇洞</div>
    </nav-bar>
    <el-backtop :bottom="60" :right="20" style="color: #ff5777"> </el-backtop>

    <el-carousel trigger="click" height="150px">
      <el-carousel-item
        v-for="(item, index) in banners"
        :key="index"
        class="carousel"
      >
        <img :src="item.image" alt="" />
      </el-carousel-item>
    </el-carousel>
    <recommend-view :recommends="recommends" />
    <feature-view />
    <tab-control
      :titles="['流行', '新款', '精选']"
      @tabClick="tabClick"
      class="tab-control"
    />
    <good-list :goods="showGoods" class="viewbottom" />
  </div>
</template>

<script>
import RecommendView from "../home/childComps/RecommendView.vue";
import FeatureView from "../home/childComps/FeatureView.vue";
import NavBar from "../../components/common/navbar/NavBar.vue";
import TabControl from "../../components/content/tabControl/TabControl.vue";
import GoodList from "../../components/content/goods/GoodsList.vue";

import { getHomeMultidata, getHomeGoods } from "network/home";

export default {
  name: "Home",
  components: {
    NavBar,
    RecommendView,
    FeatureView,
    TabControl,
    GoodList,
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
    };
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  created() {
    // 1.请求多个数据
    this.getHomeMultidata();

    // 2.请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  mounted() {},
  methods: {
    /**
     * 事件监听相关的方法
     */
    tabClick(index) {
      this.currentType = ["pop", "new", "sell"][index];
      // switch (index) {
      //   case 0:
      //     this.currentType = "pop";
      //     break;
      //   case 1:
      //     this.currentType = "new";
      //     break;
      //   case 2:
      //     this.currentType = "sell";
      //     break;
      // }
    },
    /**
     * 网络请求相关的方法
     */
    //首页轮播图和推荐模块的数据
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    //首页下面展示的商品信息
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // console.log(res);
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
      });
    },
  },
};
</script>

<style scoped>
#home {
  padding-top: 44px;
  position: relative;
  /* height: 100vh;
  position: relative; */
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 19;
}

.carousel img {
  width: 100%;
  height: 100%;
}

.tab-control {
  position: sticky;
  top: 44px;
  z-index: 10000;
  background-color: #fff;
}
.goback {
  position: fixed;
  right: 3.5%;
  top: 87.6%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background-color: #fff;
  z-index: 100;
  border-radius: 5px;
  padding: 2px 3px;
  background-color: #ff5777;
  color: #fff;
}
.viewbottom {
  margin-bottom: 50px;
}
</style>
